<!--群消息统计-->
<!--#ifdef H5 -->
<route lang="json5">
{
  style: {
    navigationStyle: 'default',
    navigationBarTitleText: '群消息回复统计',
  },
}
</route>
<!-- #endif -->
<script setup lang="ts">
import { StatisticsTab } from '@/models/sys'
import NoReplyPage from './components/noReplyPage.vue'
import RepliedPage from './components/repliedPage.vue'
import ChatHistory from './components/chatHistory.vue'
import CloseIcon from '@/static/images/sys/cloase-dialog-icon.png'
import NotData from '@/components/NotData.vue'
import roomMessage from '@/hooks/roomMessageHooks'
import { RoomMessageItemModel } from '@/models/roomMessageModels'
import dayjs from 'dayjs'

const { ...callback } = roomMessage()
const isShowMenuDialog = ref(false)
const tabs = ['未回复用户', '已回复用户', '聊天记录']
const tabPosition = ref(StatisticsTab.ChatHistory)
const paging = ref()
const listData = ref<RoomMessageItemModel[]>([])

const curItemId = ref()
const curItemName = ref()

async function query(page: number, per_page: number) {
  const listData = await callback.roomStatList(page, per_page)
  paging.value.complete(listData)
}

function onItemCLick(item: RoomMessageItemModel, index: StatisticsTab) {
  tabPosition.value = index
  isShowMenuDialog.value = !isShowMenuDialog.value
  curItemId.value = item.id
  curItemName.value = item.theme
}
</script>

<template>
  <view style="background: #f8f9fb" class="pt-1 pb-5">
    <view class="scroll-views">
      <z-paging
        ref="paging"
        loading-more-no-more-text="没有更多了"
        v-model="listData"
        @query="query"
        :fixed="false"
        :default-page-size="10"
      >
        <template #empty>
          <NotData text="暂无数据"></NotData>
        </template>
        <view v-for="(item, index) in listData" :key="index">
          <view
            class="round-corners mt-3 ml-4 mr-4"
            style="padding: 32rpx"
            @click="onItemCLick(item, StatisticsTab.ChatHistory)"
          >
            <view class="linear-hor">
              <wd-text :text="item.name" color="#6A707C" size="24rpx" :lines="1" />
              <view class="spacer" />
              <view style="display: flex; align-items: end; justify-content: end; width: 150rpx">
                <wd-text
                  :text="dayjs(item.start_time)?.format('YYYY.MM.DD')"
                  color="#6A707C"
                  size="24rpx"
                  :lines="1"
                />
              </view>
            </view>
            <view style="width: 100%; height: 2rpx; margin: 16rpx 0; background: #ebedf2" />
            <wd-text :text="'主题：' + item.theme" color="#2B2F36" size="28rpx" :lines="2" />
            <view style="width: 100%; padding: 24rpx 0" class="round-corners-gray mt-3">
              <wd-row :gutter="0">
                <wd-col :span="8">
                  <view class="linear-vertical">
                    <wd-text :text="item.user_count" color="#2B2F36" size="40rpx" />
                    <wd-text text="群人数" color="#6A707C" size="24rpx" class="mt-1" />
                  </view>
                </wd-col>
                <wd-col :span="8">
                  <view
                    class="linear-vertical"
                    @click.stop="onItemCLick(item, StatisticsTab.Replied)"
                  >
                    <wd-text :text="item.replied_count" color="#18CB7F" size="40rpx" />
                    <wd-text text="已回复人数" color="#6A707C" size="24rpx" class="mt-1" />
                  </view>
                </wd-col>
                <wd-col :span="8">
                  <view
                    class="linear-vertical"
                    @click.stop="onItemCLick(item, StatisticsTab.NoReply)"
                  >
                    <wd-text
                      :text="item.user_count - item.replied_count"
                      color="#18CB7F"
                      size="40rpx"
                    />
                    <wd-text text="未回复人数" color="#6A707C" size="24rpx" class="mt-1" />
                  </view>
                </wd-col>
              </wd-row>
            </view>
          </view>
        </view>
      </z-paging>
    </view>
    <wd-popup
      v-model="isShowMenuDialog"
      position="bottom"
      :closable="false"
      :modal="true"
      :safe-area-inset-bottom="true"
      custom-style="  height: 1080rpx;
  background: linear-gradient(180deg, #ffffff 0%, #f4f4f4 18%, #f3f3f3 100%);
  border-top-left-radius: 24rpx;
  border-top-right-radius: 24rpx;"
    >
      <view>
        <view style="position: sticky; top: 0">
          <view style="position: relative; height: 60px">
            <view class="title-style">
              <wd-text :text="curItemName" color="#2B2F36" size="32rpx" :lines="1" />
            </view>
            <view style="position: absolute; top: 50%; right: 24rpx; transform: translateY(-50%)">
              <wd-img
                :src="CloseIcon"
                width="40rpx"
                height="40rpx"
                @click="isShowMenuDialog = false"
              />
            </view>
          </view>

          <view class="tabs tabs-head">
            <template v-for="(item, index) in tabs" :key="index">
              <view
                class="tab-view"
                :style="{
                  width: `${100 / tabs.length}%`,
                }"
                :class="index === tabPosition ? 'text-primary' : ''"
                @click="tabPosition = index"
              >
                {{ item }}
              </view>
              <view class="line" v-if="tabs.length - 1 !== index"></view>
            </template>
          </view>
        </view>
        <view class="relative">
          <view v-if="tabPosition === StatisticsTab.NoReply" class="views">
            <NoReplyPage
              :isShowMenuDialog="isShowMenuDialog"
              :id="curItemId"
              :tabPosition="tabPosition"
            ></NoReplyPage>
          </view>
          <view v-if="tabPosition === StatisticsTab.Replied" class="views">
            <RepliedPage
              :isShowMenuDialog="isShowMenuDialog"
              :id="curItemId"
              :tabPosition="tabPosition"
            ></RepliedPage>
          </view>
          <view v-if="tabPosition === StatisticsTab.ChatHistory" class="views">
            <ChatHistory
              :isShowMenuDialog="isShowMenuDialog"
              :id="curItemId"
              :tabPosition="tabPosition"
            ></ChatHistory>
          </view>
        </view>
      </view>
    </wd-popup>
  </view>
</template>

<style scoped lang="scss">
.dialog-background {
  height: 1080rpx;
  background: linear-gradient(180deg, #ffffff 0%, #f4f4f4 18%, #f3f3f3 100%);
  border-top-left-radius: 24rpx;
  border-top-right-radius: 24rpx;
}

.round-corners {
  background: white;
  border-radius: 16rpx;
}

.round-corners-gray {
  background: #f8f9fb;
  border-radius: 16rpx;
}

.linear-hor {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.linear-vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.spacer {
  flex-grow: 1;
}

.tabs {
  margin: 0 32rpx;
}

.tabs-head {
  position: relative;
  display: flex;
  align-items: center;
  height: 88rpx;
  margin-bottom: 5rpx;
  background: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(183, 189, 200, 0.1);

  .tab-view {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33vw;
    height: 100%;
    font-family:
      PingFangSC,
      PingFang SC;
    font-size: 28rpx;
    font-weight: 400;
    color: #8a909c;
  }

  .line {
    width: 2rpx;
    height: 40rpx;
    background: #ebedf2;
  }
}

.text-primary {
  font-family:
    PingFangSC,
    PingFang SC;
  font-size: 28rpx !important;
  font-weight: 800 !important;
  color: #2b2f36 !important;
}

.title-style {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: calc(100vw - 150rpx);
  margin: auto;
}

.scroll-views {
  height: calc(100vh - 120rpx);
}
</style>
